<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.11.3.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/goods.css"/>
	</head>
	<body>
		<div id = "Home">
			<div id = "home">
				<ul class = "return">
					<li class = "ret"><a href = "">返回首页</a></li>
					<li class = "fav"><a href = "">收藏本站</a></li>
					<li class = "send">送货至<select><option>北京市</option></select>
						
					</li>
				</ul>
				
				<ul class = "hi">
					<li>Hi,欢迎来到果乐汇</li>
					<li><a href = "">登录</a></li>
					<li><a href = "">注册</a></li>
					<li><a href = "">全国宅配</a></li>
					<li><a href = "">APP客户端<a></li>
					<li class = "weixin"><a href = "">关注微信</a></li>
					<li class = "member"><a href = "">会员中心</a></li>
					<li class = "pho"><span>400-161-1788</span></li>
				</ul>
			</div>
		</div>
		
		
		
		<!--(三)log部分-->
		<div id = "log">
			<div class = "inp">
				<a href = "index.html"><img src = "../img/index/b8da07ea38f450226f50c96fdc165df81dbd14d7.jpg"></a>
			</div>
			<div class="search">
				<input class = "s1" type = "text" value = "始终坚持优质水果-果乐汇" />
				<input class = "s2" type = "button" value = "搜索"  />
				<ul>
					<li><a href = "">美国樱桃</a></li>
					<li><a href = "">中秋礼卡礼券</a></li>
					<li><a href = "">中秋购物卡</a></li>
					<li><a href = "">越南红心火龙果</a></li>
			</ul>
			</div>
			
			<div class = "shopping">
				<a href = "">购物车</a>
			</div>
		</div>
		   
		   
		   
		   <!--(四)nav-->
		   <div id = "Nav">
		   		<div id = "nav">
		   			<p><a href = ""><img src = "../img/index/qb.png" />全部商品分类</a></p>
		   			<ul>	
			   			<li><a href = "">首页</a></li>
			   			<li><a href = "">会员中心</a></li>
			   			<li><a href = "">品牌发展</a></li>
			   			<li><a href = "">企业采购</a></li>
			   			<li><a href = "">礼品卡</a></li>
			   			<li><a href = "">通用提货券</a></li>
			   		</ul>
		   		</div>
		   </div>
		   
		   
		   
		   <!--(五)小房子-->
		   <div id = "ss">
		   	<ul>
		   		<li><img src="../img/goods/dangqian.png"/"></li>
		   		<li><a href="">首页</a></li>
		   		<li> > </li>
		   		<li>进口鲜果</li>
		   	</ul>
		   </div>
		   
		   
		   <!--六 商品-->
		   <div id = "goods">
		   		<div class = "top">
		   			<ul class = "sha">
			   			<li class = "o">商品筛选（共五十六件商品）</li>
			   			<li class = "t"><a href = "">重置筛选项></a></li>
			   		</ul>
		   		</div>
		   		<div class = "bot">
		   			<p>您已选择：</p>
		   			<ul class = "mm">
		   				<li>分类：</li>
		   				<li><a href = "">美国水果</a></li>
		   				<li><a href = "">南非水果</a></li>
		   				<li><a href = "">泰国水果</a></li>
		   				<li><a href = "">越南水果</a></li>
		   				<li><a href = "">法国水果</a></li>
		   				<li><a href = "">智利水果</a></li>
		   				<li><a href = "">菲律宾水果</a></li>
		   				<li><a href = "">墨西哥水果</a></li>
		   				<li><a href = "">澳大利亚水果</a></li>
		   				<li><a href = "">新西兰水果</a></li>
		   				<li><a href = "">秘鲁水果</a></li>
		   				<li><a href = "">西班牙水果</a></li>
		   			</ul>
		   			<ul class = "bb">
		   				<li>促销商品：</li>
		   				<li class = "no"><a href = "">不限</a></li>
		   				<li><a href = "">减价</a></li>
		   				<li><a href = "">包邮</a></li>
		   				<li><a href = "">送积分</a></li>
		   				<li><a href = "">打折</a></li>
		   				<li><a href = "">送赠品</a></li>
		   			</ul>
		   		</div>
		   </div>
		   
		   
		   
		   
		   <!--qi价格-->
		   <div id  = "price">
			   		<div class = "leo">
					   	<input class = "txt" type="text" value="默认" />
					   	<input class = "btn" type="button" value="价格" />
					   	<input class = "btn" type="button" value="销量" />
					</div>
					<div class = "mit">
					   	<p>排序：</p>
					    <select>
					    	<option>默认</option>
					    </select>
					</div>
					<div class="rit">
						<p class = "big"><a href="">大图</a></p>
						<p><a href="">列表</a></p>
						<input type="checkbox" value="" />仅显示有货销售
					</div>
					<div class = "ril">
						<p>1/1</p>
						<div class="lsa">
							<div class = "ls"><a href = ""></a></div>
						</div>
						<div class="rsa">
							<div class =  "rs"><a href = ""></a></div>
						</div>
					</div>
			</div>
			
			
			
			<!--(八)商品-->
			<div id = "shang" clearfix>
				<div class="much">
				<input type="button"  />
				<script src="../js/goods.js"></script>
				</div>
				
			</div>
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		<!--(十二)物流等 部分-->
		<div id = "Logi">
			<div id = "logi">
				<div class="lo">
					<img src="../img/index/e633fe6678cc821d125529f351d730382d9ae207.jpg"/>
				</div>
				<ul>
					<h4><a href = "">新手指南</a></h4>
					<li><a href = "">订购方式</a></li>
					<li><a href = "">顾客须知</a></li>
					<li><a href = "">会员积分</a></li>
					<li><a href = "">预存款支付</a></li>
					<li><a href = "">用户注册</a></li>
				</ul>
				<ul>
					<h4><a href = "">购物指南</a></h4>
					<li><a href = "">联系客服</a></li>
					<li><a href = "">发票说明</a></li>
					<li><a href = "">用户常见问题</a></li>
					<li><a href = "">购物流程</a></li>
					<li><a href = "">手机订购</a></li>
				</ul>
				<ul>
					<h4><a href = "">支付配送方式</a></h4>
					<li><a href = "">礼品卡/账余额户</a></li>
					<li><a href = "">支付方式</a></li>
					<li><a href = "">订单出库时间</a></li>
					<li><a href = "">全国配送范围</a></li>
					<li><a href = "">货到付款</a></li>
				</ul>
				<ul>
					<h4><a href = "">购物条款</a></h4>
					<li><a href = "">隐私保护政策</a></li>
					<li><a href = "">会员注册协议</a></li>
					<li><a href = "">商品退换货政策</a></li>
					<li><a href = "">提货券兑换售后</a></li>
					<li><a href = "">48小时退换货</a></li>
				</ul>
				<ul>
					<h4><a href = "">公司简介</a></h4>
					<li><a href = "">招聘信息</a></li>
					<li><a href = "">联系我们</a></li>
					<li><a href = "">业务合作</a></li>
					<li><a href = "">关于我们</a></li>
				</ul>
				<ul>
					<h4>手机APP端</h4>
					<a href = ""><img src = "../img/index/d39abc7f19e677d186b91a02b6caafc66d527399.png"/></a>
				</ul>
				<ul>
					<img src="../img/index/2f63caa520445be74cf1573354d97d7306684579.jpg" />
				</ul>
			</div>
		</div>
		
		
		
		
		<!--(十三) footer-->
		<div id = "footer">
			<p>果乐汇guolehui.com.cn上海汤圣电子商务有限公司版权所有 |  All Rights Reserved©2011-2017 | 公司统一信用码 913101165852570112</p>
			<p> 北京/天津/上海/苏州/广州/深圳/成都/重庆/杭州/南京/武汉 许可证: 沪ICP备12027781号 | 沪公网备 310104031210号 商标证号:12872327</p>
			<ul>
				<li><a href = ""><img src = "../img/index/ca040708e028cc2ca1093f8def1bd22a08c8ea2c.gif"/></a></li>
				<li><a href = ""><img src="../img/index/3c71eec90eeb1a8afad5208ca326d2eb79fb3752.gif"/></a></li>
				<li><a href = ""><img src="../img/index/c31024d70b9a7c236e97d0e5feeee4410435bc24.png"/></a></li>
				<li><a href = ""><img src="../img/index/a38fbabff7dc8fcc85b540026472d06bc8527a6b.gif"/></a></li>
				<li><a href = ""><img src="../img/index/927e20eb9781d3460bdb396c2d395350c2f8f38c.jpg"/></a></li>
				<li><a href = ""><img src="../img/index/b5f98dd0207c0154d8f30999eff120a1f574bd99.png"/></a></li>
			</ul>
		</div>	
		
		
		
		
		<script type="text/javascript" src="../js/goods.cookie.js"></script>
			<script type="text/javascript" src= "../js/requestAnimationFrame.js"></script> 
	
			<script>
				$(function(){
					//加载已有的购物车信息
					loadCart();
				})
					//给购物车按钮加一个点击事件(在log那部分)
					$(".shopping").click(function(){
						location.href = "shopping_buy.html";
					})
					//给加入购物车按钮添加点击事件
					$(".pic.goodInfo .cha").click(function(e){
					//获取商品的id（用来区分不同的商品）
					var goodId = $(this).parent().attr("data-good-id");
					//获取商品的名称
					var goodName = $(this).siblings('name1').html();
					//获取商品的价格
					var goodPrice = parseFloat($(this).siblings("price1").html());
					//获取商品的图片src
					var goodSrc = $(this).siblings("img").attr("src");
					//获取cookie中的信息
					//如果cookie中没有信息会返回一个undefined ,我所须是一个字符串类型的数据，所以将它转成一个“”空字符串。保持数据类型一致。
					var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
					//将字符串转成对象
					var cartObj = convertCartStrToObj(cartStr);
					//判断该商品是否已经在购物车中存在
					if(goodId in cartObj){
						//如果已存在，那么该商品的数量加1
						cartObj[goodId].num += 1;
					}else{
						//如果不存在，那么将新商品的信息存入
						cartObj[goodId] = {
							name : goodName,
							price : goodPrice,
							num : 1,
							src : goodSrc
						};
					}//将新的购物车信息存回cookie
					//将对象转为字符串
					cartStr = convertObjToCartStr(cartObj);
					//存入cookie
					$.cookie("cart",cartStr,{expires : 7,path:"/"});	
					
			});
			
			function convertCartStrToObj(cartStr){
				//如果是空字符串，即没有购物车信息，那么购物车为空，直接返回一个空对象
				if(!cartStr){
					return {};
				}
				if(!cartStr){
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i ++){
					var data = goods[i].split(",");
					//以商品的id为健，商品的其他信息为值，这个值也设计为一个对象
					obj[data[0]] = {
						name : data[1],
						price : parseFloat(data[2]),
						num : parseInt(data[3]),
						src : data[4]
					}
				}
				return obj;
			}
			
			function convertObjToCartStr(obj){
				var cartStr = "";
				//遍历对象
				for(var id in obj){
					if(cartStr){
							cartStr += ":";
						}
					cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
					}
					return cartStr;
			}
			//加载购物车中的信息（使商品页与购物车页中的购物车数量同步）
			function loadCart(){
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
					var cartObj = convertCartStrToObj(cartStr);
				//获取到购物车中所有商品的数量
				var total = 0;
					for(var id in cartObj){
						total += cartObj[id].num;
					}
					$(".shopping").val("购物车(" + total + ")");
			}
			</script>
				
			
			
			
			
			
			
			
	</body>
</html>
